<template>
  <div>
    <br>
    <br class="hidden-xs">
    <!--    <div class="row hidden-xs text-center">-->
    <!--      <el-button-group class="player-btn-group">-->
    <!--        <el-button-->
    <!--          v-for="list in playerBtnGroup"-->
    <!--          :key="list.num"-->
    <!--          type="primary"-->
    <!--          size="medium"-->
    <!--          :class="{'active' : playerLength == list.num}"-->
    <!--          @click.prevent="setPlayerLength(list.num)"-->
    <!--        >{{ list.name }}</el-button>-->
    <!--        <el-button-->
    <!--          id="full-btn-medium"-->
    <!--          type="button"-->
    <!--          size="medium"-->
    <!--          title="全屏显示"-->
    <!--          @click.prevent="fullscreen"-->
    <!--        >-->
    <!--          <i class="el-icon-rank" />-->
    <!--        </el-button>-->
    <!--      </el-button-group>-->
    <!--    </div>-->
    <div class="row hidden-xs text-center">
      <el-button-group class="player-btn-group">
        <el-button
          v-for="list in playerBtnGroup"
          :key="list.num"
          type="primary"
          size="medium"
          :class="{'active' : playerLength == list.num}"
          @click.prevent="setPlayerLength(list.num)"
        >{{ list.name }}</el-button>
        <el-button
          id="full-btn-medium"
          type="button"
          size="medium"
          title="全屏显示"
          @click.prevent="fullscreen"
        >
          <i class="el-icon-rank" />
        </el-button>
      </el-button-group>
    </div>
    <div class="row visible-xs text-center">
      <el-button-group class="player-btn-group">
        <el-button
          v-for="list in playerBtnGroup"
          :key="list.num"
          type="primary"
          size="mini"
          :class="{'active' : playerLength == list.num}"
          @click.prevent="setPlayerLength(list.num)"
        >{{ list.name }}</el-button>
        <el-button
          id="full-btn-mini"
          type="button"
          size="mini"
          title="全屏显示"
          @click.prevent="fullscreen"
        >
          <i class="el-icon-rank" />
        </el-button>
      </el-button-group>
    </div>
    <br>
    <br class="hidden-xs">
    <div class="view-list row">
      <div
        class="video-show col-xs-12 col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"
      >
        <div>
          <div
            v-for="(player,index) in players"
            :key="index"
            class="no-margin no-padding video"
            :class="{'col-sm-12': playerLength == 1,'col-sm-6': playerLength == 4,'col-sm-4': playerLength == 9,'col-sm-3': playerLength == 16}"
            @mousemove="resetCloseTimer(player)"
            @touchstart="resetCloseTimer(player)"
          >
            <LivePlayer
              v-loading="player.bLoading"
              :video-url="player.url"
              :poster="player.poster"
              :live="true"
              :stretch="true"
              muted
              :fluent="false"
              :show-custom-button="false"
              element-loading-text="加载中..."
              element-loading-background="#000"
              :loading.sync="player.bLoading"
              @message="$message"
            />
            <div
              v-show="player.url && player.bCloseShow"
              class="video-close"
              @click="closeVideo(index)"
            >关闭</div>
            <div
              v-show="!player.url && player.bCloseShow"
              class="video-close"
              @click="selectChannel(index,player)"
            >选择通道</div>
          </div>
          <ScreenChannelListDlg
            ref="channelListDlg"
            :title="channelListDlgTitle"
            style="z-index:2001;"
            @selected="play"
          />
        </div>
      </div>
    </div>
    <br>
  </div>
</template>

<script>
import ScreenChannelListDlg from '../../components/ScreenChannelListDlg.vue'
import LivePlayer from '@liveqing/liveplayer'
import { getVideoInfoList } from '@/api/sapientialSite/videoInfo'
// eslint-disable-next-line no-unused-vars
import _ from 'lodash'

export default {
  components: {
    LivePlayer,
    ScreenChannelListDlg
  },
  data() {
    return {
      players: [],
      playerLength: 4,
      channelListDlgTitle: '',
      protocol: ''
    }
  },
  computed: {
    playerBtnGroup() {
      var list = [
        {
          num: 1,
          name: '单屏'
        },
        {
          num: 4,
          name: '四分屏'
        },
        {
          num: 9,
          name: '九分屏'
        }
      ]
      if (!this.isIE()) {
        list.push({
          num: 16,
          name: '十六分屏'
        })
      }
      return list
    }
  },
  mounted() {
    this.setPlayerLength(this.playerLength)
    this.protocol = this.getQueryString('protocol', '')
    this.queryDevices()
  },
  beforeDestroy() {
    this.clearVideos()
  },
  methods: {
    getQueryString(name, defVal = '') {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) {
        return unescape(r[2])
      }
      return defVal
    },
    queryDevices() {
      getVideoInfoList()
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },

    clearVideos() {
      for (var idx in this.players) {
        this.closeVideo(idx)
      }
    },
    selectChannel(index) {
      this.channelListDlgTitle = `为第 ${index + 1} 屏选择通道`
      this.$refs['channelListDlg'].show(index)
    },
    setPlayerLength(playerNum) {
      if (playerNum === this.players.length) {
        return
      }
      this.clearVideos()
      this.players = []
      this.playerLength = playerNum
      for (let index = 0; index < this.playerLength; index++) {
        this.players.push({
          url: '',
          bLoading: false,
          timer: 0,
          bCloseShow: false,
          closeTimer: 0
        })
      }
    },
    play(index, channel) {
      var i = 0
      var player = null
      for (var _player of this.players) {
        if (index === i) {
          player = _player
          break
        }
        i++
      }
      if (!player) {
        this.$message({
          type: 'error',
          message: '当前播放窗口已被占满！'
        })
        return
      }
      // console.log(channel.id)
      player.bLoading = false
      getVideoInfoList()
        .then(stream => {
          // console.log('dfasdfds', stream)
          // 把这个通道修改成配置文件
          var videoUrl = channel.path
          console.log('播放路径', videoUrl)
          var protocol = 'RTMP'
          var _protocol = String(this.protocol).toUpperCase()
          console.log('测试路径是否正常')
          const _code = videoUrl.split('_')
          console.log(_code)
          switch (_protocol) {
            case 'RTMP':
              videoUrl = stream.RTMP || ''
              protocol = 'RTMP'
              break
            case 'HLS':
              videoUrl = videoUrl || ''
              protocol = 'HLS'
              break
            case 'FLV':
              videoUrl = stream.FLV || ''
              protocol = 'FLV'
              break
            case 'WS_FLV':
              videoUrl = stream.WS_FLV || ''
              protocol = 'WS_FLV'
              break
            case 'WS-FLV':
              videoUrl = stream.WS_FLV || ''
              protocol = 'WS_FLV'
              break
          }
          player.protocol = protocol
          player.poster = protocol === 'RTMP' ? '' : videoUrl
          this.$nextTick(() => {
            player.url = videoUrl
            console.log('路径', player.url)
          })
          this.resetCloseTimer(player)
        })
        .catch(err => {
          player.bLoading = false
          console.log(err)
        })
    },
    closeVideo: function(idx) {
      var player = this.players[idx]
      // console.log('closeVideo关闭rtmp媒体流', player)
      const _code = player.url.split('_')
      console.log(_code)
      if (!player) {
        return
      }
      if (player.closeTimer) {
        clearTimeout(player.closeTimer)
        player.closeTimer = 0
      }
      player.bCloseShow = false
      player.bloading = false
      player.poster = ''
      player.url = ''
    },
    fullscreen() {
      if (this.isMobile()) {
        this.$message({
          type: 'error',
          message: '请在电脑浏览器上使用该功能'
        })
        return
      }
      this.$fullscreen.enter(this.$el.querySelector(`.video-show > div`), {
        wrap: false
      })
    },
    resetCloseTimer(player) {
      player.bCloseShow = true
      if (player.closeTimer) {
        clearTimeout(player.closeTimer)
      }
      player.closeTimer = setTimeout(() => {
        player.bCloseShow = false
      }, 2000)
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.protocol = vm.getQueryString('protocol', '')
    })
  },
  beforeRouteUpdate(to, from, next) {
    this.clearVideos()
    this.protocol = this.getQueryString('protocol', '')
    next()
  },
  beforeRouteLeave(to, from, next) {
    this.clearVideos()
    next()
  }
}
</script>

<style type="text/css" src="../../../assets/styles/bootstrap.css"></style>
<style type="text/css" src="../../../assets/styles/AdminLTE.css"></style>
<style lang="less" scoped>
.view-list {
  .video-show {
    .video {
      border: 1px solid #fff;
    }
    .col-sm-12 {
      &:nth-child(1) {
        border: 0;
      }
    }

    .col-sm-6 {
      &:nth-child(1),
      &:nth-child(2) {
        border-top-color: transparent;
      }

      &:nth-child(2),
      &:nth-child(4) {
        border-right-color: transparent;
      }

      &:nth-child(1),
      &:nth-child(3) {
        border-left-color: transparent;
      }

      &:nth-child(3),
      &:nth-child(4) {
        border-bottom-color: transparent;
      }
    }

    .col-sm-4 {
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        border-top-color: transparent;
      }

      &:nth-child(3),
      &:nth-child(6),
      &:nth-child(9) {
        border-right-color: transparent;
      }

      &:nth-child(7),
      &:nth-child(8),
      &:nth-child(9) {
        border-bottom-color: transparent;
      }

      &:nth-child(1),
      &:nth-child(4),
      &:nth-child(7) {
        border-left-color: transparent;
      }
    }

    .col-sm-3 {
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(4) {
        border-top-color: transparent;
      }

      &:nth-child(4),
      &:nth-child(8),
      &:nth-child(12),
      &:nth-child(16) {
        border-right-color: transparent;
      }

      &:nth-child(13),
      &:nth-child(14),
      &:nth-child(15),
      &:nth-child(16) {
        border-bottom-color: transparent;
      }

      &:nth-child(1),
      &:nth-child(5),
      &:nth-child(9),
      &:nth-child(13) {
        border-left-color: transparent;
      }
    }
  }
}

.fullscreen {
  width: 100% !important;
}

.video-close {
  position: absolute;
  top: 5px;
  right: 5px;
  color: white;
  font-size: 12px;
  background-color: fade(gray, 50%);
  padding: 2px 5px;
  cursor: pointer;
  border-radius: 2px;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-btn-group {
  margin: 5px 0;

  .el-button--primary {
    color: #567;
    background: #ffffff;
    border: 1px solid #dcdfe6 !important;
  }

  .active {
    background-color: darken(#567, 10%);
    color: #ffffff;
  }
}

.screenInfo {
  margin-top: -23px;
}
</style>
